import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import axios from "axios";
import 'swiper/css';
import 'swiper/css/pagination';
import './mainheader.scss'
import { SearchOutline } from 'antd-mobile-icons';
import { PureComponent } from 'react';
import abc3 from '../../../img/dongtu.gif'
import abc4 from '../../../img/dongtu2.gif'
import abc5 from '../../../img/miaosha.png'
import abc6 from '../../../img/tu1.png'
import abc7 from '../../../img/tu2.png'
import abc8 from '../../../img/tu3.png'
import abc9 from '../../../img/tu4.png'
import abc10 from '../../../img/tu5.png'
import abc11 from '../../../img/tu6.png'
import abc12 from '../../../img/tu7.png'
import abc13 from '../../../img/xiaoxi.jpeg'
import abc14 from '../../../img/tuijian.jpeg'

class MainHeader extends PureComponent {
    constructor() {
        super();
        this.state = ({
            swiperBg: 0,
            myswiper: null,//保存轮播对象
            showType: true,
            listNav: [],
        })
    }
    componentDidMount() {
        //滚动事件
        window.onscroll = () => {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 200) {
                this.state.myswiper.autoplay.stop();
            } else {
                this.state.myswiper.autoplay.start();

            }
        }
        axios.post("https://srv.hotkidceo.com/appapi/api/root-ceo-content/hpPageConfigure/pageList", { channelId: "C06022632001", memberKey: 33294872 }).then(res => {
            console.log(res);
            this.setState({
                listNav: res.data.data[2].configureAttribute
            })
        })

    }
    goSearch = () => {
        // console.log(7);
        // console.log(this.props);
        this.props.history.push('/search');

    }
    componentWillUnmount() {
        window.onscroll = undefined;
        this.state.myswiper.autoplay.stop();
    }
    render() {
        let { swiperList } = this.props;
        let { swiperBg, showType, listNav } = this.state;
        return <>
            <div className='main_con' style={{ backgroundImage: `url(${swiperList[swiperBg].singleBackgroundURL})` }}>

                <div className={showType ? 'm_fixed' : ''} style={showType ? { backgroundImage: `url(${swiperList[swiperBg].singleBackgroundURL})` } : { backgroundImage: 'none' }}  >
                    <div className="m_title">旺仔旺铺</div>
                    <div className="m_search" onClick={this.goSearch} >
                        <SearchOutline /> &nbsp;
                        冻痴*6组合
                    </div>
                </div>
                <Swiper className={showType ? "mainswiper ms-padding " : "mainswiper"}
                    modules={[Pagination, Autoplay]}
                    pagination={{ clickable: true }}
                    autoplay={{ delay: 2000 }}
                    loop={true}
                    onSlideChange={(swiper) => {
                        console.log('slide change')
                        this.setState({ swiperBg: swiper.realIndex })
                    }}
                    onSwiper={(swiper) => this.setState({ myswiper: swiper })}
                >
                    {
                        swiperList.map((item, index) => <SwiperSlide key={index}><img src={item.pictureURL} alt={item.pictureURL} /></SwiperSlide>)

                    }

                </Swiper>
                <div className='nav_bar'>
                    <div className='nav_bar_1'>
                        <ul>
                            {
                                listNav.map((item, index) => <li key={index}><img src={item.pictureURL} alt='item.pictureName'></img><br></br>
                                    <p>{item.pictureName}</p></li>)
                            }
                        </ul>
                    </div>

                </div>
                <div className='nav_img'><img src={abc3} alt={3} /></div>
                <div className='nav_img1'><img src={abc4} alt={3} /></div>
                <div className='nav_img2'>
                    <img src={abc5} alt={3} />
                    <div></div>
                </div>
                <div className='nav_img3'>
                    <img src={abc6} alt={3} />
                    <img src={abc7} alt={3} />
                    <img src={abc8} alt={3} />
                    <img src={abc9} alt={3} />
                </div>
                <div className='nav_img4'>
                    <img src={abc10} alt={3} className='nav_img4-1' />
                    <img src={abc11} alt={3} className='nav_img4-1' />
                    <img src={abc12} alt={3} className='nav_img4-1' />
                </div>
                <div className='nav_img5'><img src={abc13} alt={3} /></div>
                <div className='nav_img6'><img src={abc14} alt={3} /></div>
            </div>

        </>
    }
}

export default MainHeader;